package showcase

import "github.com/templui/templui/internal/components/breadcrumb"

templ BreadcrumbResponsive() {
	<!-- Mobile view (simplified with ellipsis) -->
	<div class="md:hidden">
		@breadcrumb.Breadcrumb() {
			@breadcrumb.List() {
				@breadcrumb.Item() {
					@breadcrumb.Link(breadcrumb.LinkProps{
						Href: "/",
					}) {
						Home
					}
				}
				@breadcrumb.Separator()
				@breadcrumb.Item() {
					@breadcrumb.Link(breadcrumb.LinkProps{
						Href: "#",
					}) {
						...
					}
				}
				@breadcrumb.Separator()
				@breadcrumb.Item() {
					@breadcrumb.Page(breadcrumb.ItemProps{Current: true}) {
						Current Page
					}
				}
			}
		}
	</div>
	<!-- Desktop view (full breadcrumb) -->
	<div class="hidden md:block">
		@breadcrumb.Breadcrumb() {
			@breadcrumb.List() {
				@breadcrumb.Item() {
					@breadcrumb.Link(breadcrumb.LinkProps{
						Href: "/",
					}) {
						Home
					}
				}
				@breadcrumb.Separator()
				@breadcrumb.Item() {
					@breadcrumb.Link(breadcrumb.LinkProps{
						Href: "/category",
					}) {
						Category
					}
				}
				@breadcrumb.Separator()
				@breadcrumb.Item() {
					@breadcrumb.Link(breadcrumb.LinkProps{
						Href: "/category/subcategory",
					}) {
						Subcategory
					}
				}
				@breadcrumb.Separator()
				@breadcrumb.Item() {
					@breadcrumb.Page(breadcrumb.ItemProps{Current: true}) {
						Current Page
					}
				}
			}
		}
	</div>
}
